/**
 * pinia 数据管理，相对于Vuex 来说，去掉了 mutaion 对象，所有的修改数据操作都通过 action
 *      其提供了多种的方式，也兼容vue2， vue3的框架
 *
 *
 *
 */

// store.js 第一种 setup 写法

const { definaStore } = require("pinia");

export const useStore = definaStore("useStore", () => {
  const num = ref(1);
  const activeObj = reactive({});
  const doubleName = () => num * 2;

  return { num, activeObj, doubleName };
});

// sotre.js 第二种写法
export const todoStore = definaStore("todoStore", {
  store: () => ({
    num: 1,
    activeObj: {
      name: "ck",
      address: "SH",
      arr: [1, 2, 3, 4, 5, 6, 7],
    },
  }),
  getters: {
    doubleNum: (state) => state.num * 2,
    validActiveArr: (state) => state.arr.filter((item) => item > 2),
  },

  actions: {
    increment() {
      this.num++;
    },
  },
});

// 使用
const { storeToRefs } = require("pinia");
const { todoStore } = require("./store/todoStore");

export default defineComponent({
  setup() {
    const store = todoStore();

    // 不可以直接解构，不然会失去响应式
    const { num, activeObj } = storeToRefs(store);

    // 调用getter
    store.doubleNum();
    // 调用action
    store.increment();
  },
});

/**
 * 内置的一些函数
 * 1. $reset() 重制state内部的数据
 * 2. $patch() 触发action 进行数据更新
 *      $patch 可以单个也可以批量更新数据
 *      $patch({name:'ck',age:10})
 *      $patch((state=>{
 *              state.name = 'ckckck',
 *              state.object.age = 19
 *             }))
 * 
 * 3. store.$state  = {name:'ckckck',age:10} // 可以直接批量更新
 */
